<!--教练预约-->
<template>
    <div>

                <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>教练预约</el-breadcrumb-item>
            </el-breadcrumb>
            <div style="margin: 10px auto;"></div>
        <!-- 搜索筛选 -->
            <el-form :inline="true" :model="search" class="user-search">
            <el-form-item label="搜索：">
                <el-input clearable size="small"  v-model="search.name" placeholder="姓名"></el-input>
            </el-form-item>
             <el-form-item label="科目:">
             <el-select @change="searchClick" size="small" v-model="search.manSubject" >
                    <el-option
                    label="科目二"
                    value="2">
                    </el-option>
                    <el-option
                    label="科目三"
                    value="3">
                    </el-option>
            </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
            </el-form-item>
            </el-form>


            <!--列表-->
    <el-table size="small"  style="width: 100%" :data="listData" highlight-current-row v-loading="loading"  element-loading-text="拼命加载中" >
            
            <el-table-column
                fixed
                width="200"
              prop="username"
              label="姓名">
               <template slot-scope="scope">
                      <span class="jiacu">{{scope.row.username}}</span>
              </template>
            </el-table-column>
            
             <el-table-column
                fixed
                width="200"
              prop="url"
              label="头像">
              <template slot-scope="scope">
                     <el-avatar :size="50" :src="scope.row.url"></el-avatar>
              </template>
            </el-table-column>

            <el-table-column
                
                width="200"
              prop="tel"
              label="电话">
            </el-table-column>

            <el-table-column
                
                width="200"
              prop="carNum"
              label="车牌号">
              <template slot-scope="scope">
                        <el-tag type="danger">{{scope.row.carNum}}</el-tag>
              </template>
            </el-table-column>

            <el-table-column
                
                width="200"
                prop="score"
              label="评分">
              <template slot-scope="scope">
                        <el-rate
                        disabled
                        v-model="scope.row.score"
                        show-text>
                        </el-rate>
              </template>
            </el-table-column>



        <el-table-column v-if="user.testStatus == search.manSubject && user.testState == '0' " align="center" label="操作" min-width="300">
            <template slot-scope="scope">
                 <el-popconfirm
                @confirm="followCoach(scope.row.id)"
                title="确定要关注该教练吗？"
                >
                <el-button slot="reference"  size="mini"   type="danger" >关 注</el-button>
               </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            search:{
                name:'',
                manSubject:'2',
                rid:'3'
            },
            listData:[],
            loading:false,
            user:''
        }
    },
    created(){
        this.findData();
        this.user = JSON.parse(window.sessionStorage.getItem("user"));
    },
    methods: {
        findData(){
            this.loading =true;
            this.$api.post("/user/token/findUserBySearch",this.search,Response=>{
                    setTimeout(()=>{
                        this.listData = Response.data.data;
                        this.loading =false;
                    },500)      
            })
        },
        searchClick(){
            this.findData();
        },
        followCoach(id){   //关注教练
            this.$api.get("/user/token/bindCoach",{"id":id},Response=>{
                if(Response.data.code == 200){
                    this.$message.success(Response.data.data)
                }else{
                    this.$message.error(Response.data.data)
                }
            })
        },
       
    },
}
</script>
<style scoped>

</style>